<template>
  <!-- svip会员模块 -->
  <view class="vipBox">
    <view class="vipPaid pt-40">
      <!-- #ifdef MP -->
      <nav-bar navTitle="SVIP会员" :iconColor="iconColor" :isBackgroundColor="false"
               :backgroundColor="backgroundColor"></nav-bar>
      <!-- #endif -->
<!--      <view class="headerBg" :style="{'background-image': `url(https://fengqinghui.oss-cn-hangzhou.aliyuncs.com/monkey/monkey/svipBg.png)`}">-->
<!--      </view>-->
      <view class="headerBg" style="background: linear-gradient(to bottom right, #e0e7ef 0%, #000000 100%);">
      </view>
      <!-- 会员信息 -->
      <view class="card-section" :style="[svipInfo.isPaidMember?paidMemberSize:noMemberSize]">
        <view v-if="svipInfo.isPaidMember" class="avatar-wrap">
          <view class="acea-row mb-28">
            <image class="avatar" :src="svipInfo.avatar"></image>
            <view class="text">
              <view class="name line1">{{ svipInfo.nickname }}</view>
              <view class="tips">{{ svipInfo.phone }}</view>
            </view>
          </view>
          <view class="acea-row row-middle tips" @click="goToRecord">
            <view v-if="svipInfo.isPermanentPaidMember">永久SVIP会员</view>
            <view v-else>SVIP会员至{{ svipInfo.paidMemberExpirationTime }}</view>
            <text class="f-s-20 iconfont icon-gengduo3 ml-8"></text>
          </view>
        </view>
      </view>
      <!-- 会员权益 -->
      <view class="benefits-section" :class="!svipInfo.isPaidMember?'bgColor':''">
        <view class="acea-row row-between mb-36" @click="goToBenefits(0)">
          <view class="title">会员尊享权益</view>
          <view class="acea-row row-middle">
            <view class="f-s-24 text mr10">权益介绍</view>
            <text class="text f-s-20 iconfont icon-gengduo3"></text>
          </view>
        </view>
        <view class="section-bd acea-row row-between-wrapper">
          <view v-for="(item,index) in svipInfo.benefitsList" :key="item.id" class="item"
                @click="goToBenefits(index)">
            <view class="image-wrap acea-row row-center row-middle">
              <view class="image-wrap-inner acea-row row-center-wrapper">
                <image class="image" :src="item.imageUrl"></image>
              </view>
            </view>
            <view class="text">
              <view class="name f-s-24 lh-34rpx">{{ item.value }}</view>
              <view class="f-s-20 lh-28rpx">{{ item.message }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="other-section pt-20">
        <!-- 会员卡 -->
        <view
            v-if="svipInfo && svipInfo.cardList && svipInfo.cardList.length>0 && !svipInfo.isPermanentPaidMember"
            class="type-section" id="card">
          <view class="type-section-inner">
            <view class="title acea-row row-between-wrapper">
              <view class="">开通SVIP</view>
            </view>
            <scroll-view class="scroll" scroll-x="true">
              <view v-for="item in svipInfo.cardList" :key="item.id" class="item"
                    :class="{on: item.id === svip.id}" @click="checkType(item)">
                <view v-show="item.label" class="badge">{{ item.label }}</view>
                <view class="name">{{ item.name }}</view>
                <view class="new">￥
                  <text class="num semiBold">{{ item.price | moneyFormat }}</text>
                </view>
                <view class="old">￥{{ item.originalPrice | moneyFormat }}</view>
              </view>
            </scroll-view>
          </view>
        </view>
        <!-- 推荐商品 -->
        <view v-if="recommendList.length">
          <view class="flex-center recommend-box mt-20">
            <image :src="`${urlDomain}crmebimage/presets/haowuzuo.png`"></image>
            <view class="f-s-32 lh-44rpx ml-4">会员专享好物</view>
            <image class="ml-6" :src="`${urlDomain}crmebimage/presets/haowuyou.png`"></image>
          </view>
          <recommend style="margin-top: -6rpx;" ref="recommendIndex" :isShowTitle="false" :isDefault="false"
                     :recommendList="recommendList">
          </recommend>
        </view>
        <!-- 购买按钮 -->
        <view v-if="!svipInfo.isPermanentPaidMember" class="footer" style="z-index: 10">
          <view class="protocol acea-row row-middle mb-20" :class="svip.giftBalance==0?'row-center':''">
            <view class="checkbox acea-row row-middle" @click="isAgree=!isAgree">
              <text v-if="!isAgree" class="iconfont icon-weixuanzhong"></text>
              <text v-else class="iconfont icon-xuanzhong1"></text>
            </view>
            <text class="f-s-24 text-999 ml-8">开通前请确认
              <text @click="userAgree"
                    class="protocol_text f-s-24">《会员服务协议》
              </text>
            </text>
          </view>
          <view v-show="svip.giftBalance!=0" class="isFirstChargeGive f-s-24"
                :style="{'background-image': `url(${urlDomain}crmebimage/presets/juxing.png)`}">
            {{ svip.isFirstChargeGive ? '首次开通' : '现在购买' }}立送{{ svip.giftBalance }}元余额
          </view>
          <view class="acea-row">
            <view class="text acea-row row-middle">
              <view>
                <text class="symbol">¥</text>
                <text class="number semiBold ml-4">
                  {{ svip.price }}
                </text>
                <text
                    class="original regular">原价¥{{ parseFloat(svip.originalPrice) }}
                </text>
              </view>
            </view>
            <view class="buy acea-row row-center-wrapper" @tap="subOrder">立即开通</view>
          </view>
        </view>
        <!-- <view v-show="!svipInfo.isPermanentPaidMember" class="footer-placeholder"></view> -->
      </view>
    </view>
    <!-- 评论 -->
    <uni-popup type="center" animation ref="activate" :mask-click="false">
      <view class="w-600 h-344 bg--w111-fff rd-14rpx acea-row row-column activate-box">
        <span class="iconfont icon-guanbi5 absolute" @click="onClose"></span>
        <view class="f-s-32 text--w111-333 lh-44rpx mb-24 text-center">确认开通</view>
        <view class="text--w111-666 mb-40">我已阅读并同意
          <text @click="userAgree"
                class="protocol_text f-s-24">《会员服务协议》
          </text>
          ，确认开通该套餐。
        </view>
        <view class="btn" @click="sureOrder">继续开通</view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import recommend from "@/components/base/recommend.vue";
import navBar from '@/components/navBar';
import orderPay from "@/mixins/OrderPay.js";
import {
  Debounce
} from '@/utils/validate.js'
import {
  svipInfoApi,
  svipBenefitsListApi
} from '@/api/activity.js';
import {
  productMemberApi
} from '@/api/product.js';
import {
  goToAgreement
} from "@/libs/order";

export default {
  mixins: [orderPay],
  components: {
    // #ifdef MP
    navBar,
    // #endif
    recommend
  },
  computed: {
    paidMemberSize() {
      return {
        backgroundImage: `url(${this.$Cache.get("imgHost")}crmebimage/presets/huiyuanbj2.png)`,
        width: '710rpx',
        height: '642rpx',
        backgroundSize: '710rpx 642rpx',
        marginLeft: '20rpx'
      }
    },
    noMemberSize() {
      return {
        backgroundImage: `url(${this.$Cache.get("imgHost")}crmebimage/presets/huiyuanbj.png)`,
        width: '662rpx',
        height: '329rpx',
        backgroundSize: '662rpx 329rpx',
        marginLeft: '36rpx',
      }
    }
  },
  data() {
    return {
      urlDomain: this.$Cache.get("imgHost"),
      userInfo: {},
      // #ifdef MP
      iconColor: '#FFFFFF',
      isScrolling: false,
      // #endif
      benefitsList: [], //会员权益
      svipInfo: {}, //会员信息
      svip: {},
      goodScroll: false,
      params: { //精品推荐分页
        page: 1,
        limit: 10,
      },
      loading: false,
      recommendList: [],
      totalPrice: 0,
      isAgree: false,
      backgroundColor: ''
    }
  },
  onLoad() {
    this.getProductMember()
    this.getSvipInfo();
    this.getSvipBenefitsList();
  },
  onPageScroll(e) {
    uni.$emit('scroll');
    // #ifdef MP
    if (e.scrollTop > 50) {
      this.backgroundColor = '#fff';
      this.iconColor = '#333333'
    } else if (e.scrollTop < 50) {
      this.backgroundColor = '';
      this.iconColor = '#fff'
    }
    // #endif
  },
  methods: {
    //关闭弹窗
    onClose() {
      this.$refs.activate.close();
    },
    //记录跳转
    goToRecord() {
      uni.navigateTo({
        url: `/pages/activity/vip_order_record/index`
      });
    },
    //确认开通
    sureOrder() {
      this.isAgree = true;
      this.$refs.activate.close();
      this.handlerOpen();
    },
    //协议跳转
    userAgree() {
      goToAgreement('paid/member/agreement/info')
    },
    //权益跳转
    goToBenefits(currentIndex) {
      uni.navigateTo({
        url: `/pages/activity/vip_paid_benefits/index?currentIndex=${currentIndex}`
      });
    },
    //会员专享好物
    getProductMember() {
      uni.hideLoading();
      if (this.goodScroll) return;
      this.loading = true
      productMemberApi(
          this.params
      ).then((res) => {
        this.$set(this.params, 'page', this.params.page + 1);
        this.goodScroll = this.params.page > res.data.totalPage;
        this.recommendList = this.recommendList.concat(res.data.list || []);
        this.loading = false
      }).catch(err => {
        this.loading = false
      });
    },
    //会员信息
    getSvipInfo() {
      uni.hideLoading();
      svipInfoApi().then(res => {
        this.svipInfo = res.data;
        this.svip = this.svipInfo.cardList[0];
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        });
      });
    },
    //会员权益
    getSvipBenefitsList() {
      uni.hideLoading();
      svipBenefitsListApi().then(res => {
        this.benefitsList = res.data;
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none'
        });
      });
    },
    //点击会员卡
    checkType(svip) {
      this.svip = svip;
    },
    //立即开通
    subOrder: Debounce(function (e) {
      if (!this.isAgree) return this.$refs.activate.open()
      this.handlerOpen();
    }),
    handlerOpen() {
      uni.showLoading({
        title: '正在提交中'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: `/pages/goods/order_payment/index?orderNo=${this.svip.id}&payPrice=${this.svip.price}&fromType=svip`
        });
        uni.hideLoading();
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.icon-guanbi5 {
  top: 30rpx;
  right: 30rpx;
  color: #AAAAAA;
}

::v-deep .list .texts {
  background-color: #fff;
  border-radius: 0 0 14rpx 14rpx;
}

.recommend-box {
  image {
    width: 42rpx;
    height: 36rpx;
  }

  view {
    font-weight: 600;
  }
}

.vipBox {
  padding-bottom: 172px;
}

.activate-box {
  padding: 40rpx;

  .btn {
    width: 520rpx;
    height: 72rpx;
    background: #8B4513;
    border-radius: 43rpx 43rpx 43rpx 43rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 72rpx;
    text-align: center;
  }
}

::v-deep uni-checkbox .uni-checkbox-wrapper {
  vertical-align: inherit !important;
}

.protocol_text {
  color: #D88D0E;
}

.isFirstChargeGive {
  height: 66rpx;
  line-height: 66rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  right: 20rpx;
  top: 34rpx;
  z-index: 9;
  color: #fff;
  padding: 0 30rpx 0 20rpx;
}

.checkbox {
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;

  span {
    margin-left: 5rpx;
  }

  .icon-xuanzhong1 {
    color: #8B4513;
    font-style: normal;
  }

  .iconfont {
    font-size: 36rpx;
  }
}


.vipPaid {
  background: linear-gradient(180deg, #141414 0%, #000000 100%);
  //height: 900rpx;
}

.headerBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 820rpx;
  background-position: right top;
  background-repeat: no-repeat;
  background-size: 100%;
}

.paidMemberSize {
  width: 710rpx;
  height: 642rpx;
  background-size: 710rpx 642rpx;
}

.noMemberSize {
  width: 662rpx;
  height: 329rpx;
  background-size: 662rpx 329rpx;
}

.card-section {
  position: absolute;
  border-bottom-right-radius: 48rpx;
  z-index: 9;
  background-position: 0% 0%;
  background-repeat: no-repeat;

  .vip-paid {
    position: absolute;
    top: 40rpx;
    right: 52rpx;
    width: 228rpx;
    height: 328rpx;
  }

  .expect {
    padding: 32rpx 0 58rpx 36rpx;

    .image {
      display: block;
      width: 414rpx;
      height: 76rpx;
    }

    .mark {
      display: inline-flex;
      align-items: center;
      height: 48rpx;
      padding: 0 24rpx;
      border-radius: 24rpx;
      margin-top: 12rpx;
      background: linear-gradient(-270deg, #E7B667 0%, #FFEAB5 100%);
      font-size: 28rpx;
      line-height: 48rpx;
      color: #7E4B06;

      .number {
        margin: 0 8rpx;
        font-size: 36rpx;
      }
    }
  }

  .avatar-wrap {
    min-height: 236rpx;
    padding: 62rpx 0 0 40rpx;

    .text {
      flex: 1;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #89735B;

      .shopName {
        max-width: 164rpx;
      }

      .name {
        display: inline-block;
        vertical-align: middle;
        font-weight: 500;
        font-size: 32rpx;
        line-height: 44rpx;
        background: linear-gradient(-270deg, #FACB7A 0%, #FFF3D5 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }

  .avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .tips {
    margin-top: 6rpx;
    font-size: 22rpx;
    line-height: 30rpx;
    color: rgba(254, 227, 174, 0.8);
  }

  .info {
    margin-top: 74rpx;
    font-size: 24rpx;
    color: #AE5A2A;
  }

  .num {
    font-size: 36rpx;
  }

  .btn {
    width: 146rpx;
    height: 44rpx;
    border-radius: 22rpx;
    background-color: #FFFFFF;
    line-height: 44rpx;
    text-align: center;
  }
}

.bgColor {
  background-color: #1B1B1B;
}

.benefits-section {
  padding: 32rpx;
  width: 710rpx;
  height: 400rpx;
  border-radius: 24rpx;
  margin: 234rpx 20rpx 0 20rpx;
  position: relative;
  z-index: 97;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: rgba(250, 204, 125, 0.8);
    line-height: 44rpx;
  }

  .text {
    color: rgba(255, 255, 255, 0.6);
  }

  .section-hd {
    padding: 32rpx 32rpx 36rpx;
    font-weight: 500;
    font-size: 30rpx;
    line-height: 44rpx;
    color: rgba(250, 204, 125, 0.8);

    .arrow {
      font-weight: 400;
      font-size: 24rpx;
      line-height: 34rpx;
      color: rgba(255, 255, 255, 0.6);
    }

    .iconfont {
      font-size: 24rpx;
    }
  }

  .section-bd {
    padding: 0 0 32rpx;

    .item {
      flex: 1;
      min-width: 0;
    }

    .image-wrap {
      position: relative;
      border-radius: 50%;
      margin: 0 auto;
      width: 88rpx;
      height: 88rpx;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 2%, rgba(255, 255, 255, 0) 100%);
      border: 1rpx solid;

      .image-wrap-inner {
        width: 42rpx;
        height: 37rpx;
      }
    }

    .image-inner {
      height: 100%;
      border-radius: 50%;
    }

    .image {
      width: 100%;
      height: 100%;
    }

    .text {
      margin-top: 28rpx;
      text-align: center;
      color: rgba(255, 255, 255, 0.4);
    }

    .name {
      margin-bottom: 8rpx;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.other-section {
  position: relative;
  border-top-left-radius: 48rpx;
  border-top-right-radius: 48rpx;
  background-color: #F5F5F5;
  margin-top: -68rpx;
  z-index: 98;
}

.type-section {
  padding: 0 20rpx 22rpx 20rpx;

  .type-section-inner {
    border-radius: 24rpx;
    background-color: #FFFFFF;
    padding-bottom: 32rpx;
  }

  .title {
    padding: 32rpx 32rpx 26rpx;
    border-radius: 24rpx 24rpx 0 0;
    background: linear-gradient(180deg, #FFEFCE 0%, #FFFFFF 100%);
    font-weight: bold;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #333333;

    .bold {
      display: inline-block;
      margin-right: 14rpx;
      font-weight: bold;
      font-size: 32rpx;
      line-height: 45rpx;
      color: #333333;

      + view {
        display: inline-block;
      }
    }

    .time {
      margin-left: 14rpx;
      font-size: 24rpx;
      color: #AE5A2A;
    }

    .cash {
      font-weight: 400;
      font-size: 26rpx;
      line-height: 36rpx;
      color: rgba(217, 126, 29, 0.8);
    }
  }

  .scroll {
    white-space: nowrap;
  }

  .item {
    position: relative;
    display: inline-block;
    min-width: 220rpx;
    padding: 60rpx 6rpx;
    border: 1rpx solid #DDDDDD;
    border-radius: 24rpx;
    margin: 16rpx 24rpx 0 0;

    &:first-child {
      margin: 16rpx 24rpx 0 32rpx;
    }

    &:last-child {
      margin: 16rpx 32rpx 0 0;
    }

    &.on {
      border: 2rpx solid #D97E1D;
      background: linear-gradient(180deg, #FFFFFF 0%, #FEF5E6 100%);
    }

    .badge {
      position: absolute;
      top: 0;
      left: -2rpx;
      height: 44rpx;
      padding: 0 12rpx;
      border-radius: 22rpx 22rpx 22rpx 0;
      margin-top: -18rpx;
      background: linear-gradient(90deg, #FF7931 0%, #8B4513 100%);
      font-size: 24rpx;
      line-height: 44rpx;
      color: #FFFFFF;
    }

    .name {
      text-align: center;
      font-weight: 500;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #7E4B06;
    }

    .button {
      width: 142rpx;
      height: 52rpx;
      border-radius: 22rpx;
      margin: 18rpx auto 0;
      background-color: #FEE8BC;
      text-align: center;
      font-size: 22rpx;
      line-height: 52rpx;
      color: #333333;
    }
  }

  .new {
    margin-top: 28rpx;
    text-align: center;
    font-family: SemiBold;
    font-size: 36rpx;
    line-height: 62rpx;
    color: #333333;

    .num {
      font-size: 52rpx;
    }
  }

  .old {
    margin-top: 8rpx;
    text-decoration: line-through;
    text-align: center;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #999999;
  }

  .info {
    margin-top: 4rpx;
    text-align: center;
    font-size: 24rpx;
    line-height: 34rpx;
    color: #999999;
  }

  .agree {
    font-size: 22rpx;
    text-align: center;
    color: #797979;

    .link {
      display: inline-block;
    }

    .mark {
      color: #AE5A2A;
    }
  }
}

.footer-placeholder {
  height: 152rpx;
  height: calc(152rpx + constant(safe-area-inset-bottom));
  height: calc(152rpx + env(safe-area-inset-bottom));
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 22rpx 20rpx;
  padding-bottom: calc(22rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(22rpx + env(safe-area-inset-bottom));
  background-color: #FFFFFF;

  .text {
    flex: 1;
    height: 108rpx;
    padding-left: 48rpx;
    border-radius: 54rpx 0 0 54rpx;
    background-color: #222222;
    font-size: 28rpx;
    color: #FACC7D;
  }

  .symbol {
    font-weight: 600;
    font-size: 32rpx;
  }

  .number {
    font-size: 48rpx;
  }

  .original {
    margin-left: 16rpx;
    text-decoration: line-through;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.4);
  }

  .buy {
    position: relative;
    width: 266rpx;
    height: 108rpx;
    border-radius: 0 54rpx 54rpx 0;
    background: linear-gradient(to right, #FFDD9C, #EEA82F);
    font-weight: 500;
    font-size: 32rpx;
    color: #7E4B06;

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      border-width: 54rpx 20rpx;
      border-style: solid;
      border-color: #222222 transparent transparent #222222;
    }
  }
}

.coupon-section {
  border-radius: 24rpx;
  margin: 0 20rpx;
  background-color: #FFFFFF;

  .section-hd {
    padding: 32rpx 32rpx 24rpx;
    font-weight: bold;
    font-size: 32rpx;
    line-height: 44rpx;
    color: #333333;

    .link {
      font-weight: 400;
      font-size: 26rpx;
      line-height: 36rpx;
      color: #666666;

      .iconfont {
        font-size: 24rpx;
      }
    }
  }

  .section-bd {
    padding-bottom: 24rpx;
    white-space: nowrap;

    .item {
      position: relative;
      display: inline-block;
      width: 151rpx;
      padding: 0 6rpx;
      border-radius: 24rpx;
      margin: 20rpx 14rpx 0 0;
      background-color: #E0A558;

      &:first-child {
        margin-left: 32rpx;
      }

      .inner {
        padding-bottom: 76rpx;
        border: 2rpx solid #FFEDCA;
        border-radius: 12rpx;
        margin-top: -20rpx;
        background-color: #FFFFFF;

        .type {
          width: 96rpx;
          height: 38rpx;
          border-radius: 0 0 12rpx 12rpx;
          background-color: rgba(224, 165, 88, 0.2);
          margin: 0 auto;
          text-align: center;
          font-size: 20rpx;
          line-height: 38rpx;
          color: #333333;
        }
      }

      &.gray {
        background-image: url("");

        .btn {
          color: #9F9F9F;
        }

        .money {
          color: #fff;

          .num {
            color: #fff;
          }
        }

        .name {
          color: #fff;
        }

        .text {
          color: #9F9F9F;
        }

        .mark {
          color: #A8A8A8;
        }
      }

      .btn {
        width: 52rpx;
        padding-right: 14rpx;
        padding-left: 14rpx;
        white-space: pre-wrap;
        font-size: 24rpx;
        color: #5D3324;
      }

      .text {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 76rpx;
        padding-top: 30rpx;
        background-image: url("");
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-weight: bold;
        font-size: 28rpx;
        line-height: 40rpx;
        color: #5D3324;
      }

      .mark {
        text-align: center;
        font-weight: 500;
        font-size: 22rpx;
        line-height: 30rpx;
        color: rgba(250, 204, 125, 0.8);
      }

      .money {
        margin-top: 16rpx;
        text-align: center;
        font-weight: 500;
        font-size: 28rpx;
        line-height: 44rpx;
        color: #E0A558;
      }

      .num {
        font-family: SemiBold;
        font-size: 44rpx;
      }
    }
  }
}

.recommend ::v-deep .fw-500 {
  font-weight: bold;
}
</style>